<template>
    <div style="height:100%;width:100%;" ref="MapView"></div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

// 为防止 simpleMap 实体类被 vue 双向绑定对象污染
// 故在 vue 实体外部进行变量创建
var map = null;

export default {
    mounted() {
        // 初始化新的地图，需求参数（ dom元素对象，配置参数 ）
        map = simpleMap.initMap(this.$refs.MapView);
        
        // 加载地图图源 
        map.addProviders([{

            // 图源类型  TD：天地图资源格式   arcgis：arcgis地图格式
            "type": "TD",

            // 图源名称
            "name": "卫星地图",

            // 图源类型   background：背景图层  mark：标注图层
            // 注：mark（标注图层）可以展示多个，但 background 只会展示一个
            "layerType": "background",

            // 资源地址
            "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",

            // 是否默认加载该图源
            // 用于判断多个 background 类型图层时，加载某一个图源
            "default": true
        }]);
    },
    beforeDestroy(){
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>